<template>
    <div class="kbody">
        <div class="kbody-left">
            <el-col :span="24">
                <el-menu default-active="1-1-1" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-reading"></i>
                            <span>IT知识库</span>
                        </template>
                        <el-submenu index="1-1">
                            <template slot="title">安全配置</template>
                            <el-menu-item index="1-1-1">Linux系统</el-menu-item>
                            <el-menu-item index="1-1-2">Windows系统</el-menu-item>
                        </el-submenu>
                        <el-submenu index="1-2">
                            <template slot="title">服务器知识</template>
                            <el-menu-item index="1-2-1">服务器种类</el-menu-item>
                            <el-menu-item index="1-2-2">服务器运行</el-menu-item>
                        </el-submenu>
                        <el-submenu index="1-3">
                            <template slot="title">防火墙知识</template>
                            <el-menu-item index="1-3-1">防火墙分类</el-menu-item>
                            <el-menu-item index="1-3-2">防火墙运转</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-col>
        </div>
        <component class="kbody-right" :is="select"></component>
    </div>
</template>

<script>
import Linuxtable from "./LinuxTable-view.vue"
import Windowtable from "./WindowTable-view.vue"
import server1 from "./server1-view.vue"
import server2 from "./server2-view.vue"
import firewall1 from "./firewall1-view.vue"
import firewall2 from "./firewall2-view.vue"

export default {
    components: {
        Linuxtable,
        Windowtable,
        server1,
        server2,
        firewall1,
        firewall2
    },
    data() {
        return {
            select: 'Linuxtable'
        }
    },
    methods: {
        handleSelect(index) {
            // console.log(index);
            switch (index) {
                case '1-1-1':
                    this.select = 'Linuxtable'
                    break
                case '1-1-2':
                    this.select = 'Windowtable'
                    break
                case '1-2-1':
                    this.select = 'server1'
                    break
                case '1-2-2':
                    this.select = 'server2'
                    break
                case '1-3-1':
                    this.select = 'firewall1'
                    break
                case '1-3-2':
                    this.select = 'firewall2'
                    break
            }
        }
    }

}
</script>

<style lang="less" scoped>
.kbody {
    width: 100%;
    height: calc(100% - 330px);
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px #E1E1E1;
    margin-top: 10px;
    box-sizing: border-box;

    .kbody-left {
        width: 300px;
        height: 100%;
        float: left;
        border-right: 2px solid #E5E5E5;
    }

    .kbody-right {
        float: right;
        height: 100%;
        width: calc(100% - 302px);
    }
}
</style>